<template>
    <div class="my-release">
        <div class="release-btns" v-if="release.load && release.list.length === 0">
            <el-empty description="您暂时还未领取任务，请到发布中心领取任务哦！"></el-empty>
        </div>
        <div class="release-list" v-if="release.load && release.list.length > 0">
           <el-table
                :data="release.list"
                border>
                <el-table-column type="expand">
                    <template #default="props">
                        <el-form label-position="right" class="table-expand">
                            <el-form-item label="信息核实查询需求:" label-width="180px">
                                <div class="task-note">{{ props.row.TaskNote || '无' }}</div>
                            </el-form-item>
                            <template v-if="props.row.status >= 3">
                                <el-form-item label="审核结果:" label-width="180px">{{ checkResult[props.row.resultType] }}</el-form-item>
                                <el-form-item label="审核备注:" label-width="180px">{{ props.row.resultNote || '无' }}</el-form-item>
                                <el-form-item label="快递单号:" label-width="180px">{{ props.row.expressNum || '无' }}</el-form-item>
                            </template>
                            <template v-if="props.row.status === 4">
                                <el-form-item label="评分:" label-width="180px"> 
                                    <el-rate
                                        v-model="props.row.evalScore"
                                        disabled
                                        show-score
                                        allow-half
                                        text-color="#ff9900"
                                        score-template="{value}">
                                    </el-rate>
                                </el-form-item>
                                <el-form-item label="评分备注:" label-width="180px">{{ props.row.evaluation || '无' }}</el-form-item>
                            </template>
                            <el-form-item label="附件:" label-width="180px">
                                <div class="file-type-item" v-if="filterFileAction(props.row.files, 'release').length">
                                <span>发布附件:</span>
                                <ul v-for="item in filterFileAction(props.row.files, 'release')" :key="item.id">
                                    <li><a :href="`/${item.filePath}`" :download="item.fileName">{{ item.fileName }}</a></li>
                                </ul>
                                </div>
                                <div class="file-type-item" v-if="filterFileAction(props.row.files, 'check').length">
                                <span>审核附件:</span>
                                <ul v-for="item in filterFileAction(props.row.files, 'check')" :key="item.id">
                                    <li><a :href="`/${item.filePath}`" :download="item.fileName">{{ item.fileName }}</a></li>
                                </ul>
                                </div>
                                <div class="file-type-item" v-if="filterFileAction(props.row.files, '').length">
                                <span>其他附件:</span>
                                <ul v-for="item in filterFileAction(props.row.files, '')" :key="item.id">
                                    <li><a :href="`/${item.filePath}`" :download="item.fileName">{{ item.fileName }}</a></li>
                                </ul>
                                </div>
                            </el-form-item>
                            <el-form-item label="操作:" label-width="180px">
                                <el-button size="small" :disabled='props.row.status !== 2' type="primary" @click="cancelTask(props.row.id)">放弃核实</el-button>
                                <el-button size="small" :disabled='props.row.status !== 2' type="success" @click="taskCheck(props.row.id)">反馈核实信息</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="taskType"
                    align="center"
                    width="200px"
                    label="公证业务">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="信息核实查询需求">
                    <template #default="scope">
                        <p>{{scope.row.TaskNote.slice(0,10)}} {{scope.row.TaskNote.length > 10 ? '...' : ''}}  </p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="price"
                    align="center"
                    width="80px"
                    label="出价/元">
                </el-table-column>
                <el-table-column
                    prop="userName"
                    align="center"
                    width="100px"
                    label="发布人">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    align="center"
                    width="180px"
                    label="创建时间">
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    align="center"
                    width="180px"
                    label="更新时间">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="name"
                    width="100px"
                    label="状态">
                     <template #default="scope">
                         <el-tag size="small" type="success">{{ taskStatus[scope.row.status] }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :destroy-on-close='true' :width="500" title="反馈核实信息" v-model="modelVisible">
            <check-task :taskID='checkTaskID' @close='closeTaskDialog'></check-task>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, computed, onMounted, ref, toRaw, reactive } from 'vue';
import { useStore } from 'vuex';
import { TASK_STATUS, FILE_ACTION, CHECK_RESULT } from '@/config'
import { ElMessage, ElMessageBox } from 'element-plus';
import CheckTask from './components/check-task.vue'
export default defineComponent({
    name: 'ReleaseCenter',
    components: { CheckTask },
    setup() {
        const store = useStore();
        const modelVisible = ref(false);
        const checkTaskID = ref('');
        const release = reactive({
            load: false,
            list: []
        });
        // 获取我的领取列表
        const getTaskList = async() => {
            const data = await store.dispatch('task/getReceiveList');
            release.list = data;
            release.load = true;
        }
        const taskStatus = computed(() => {
            return TASK_STATUS;
        });
        const fileActions = computed(() => {
            return FILE_ACTION;
        });
        const checkResult = computed(() => {
            return CHECK_RESULT;
        });
        const cancelTask = async(taskID) => {
            await ElMessageBox.confirm('确定要释放此条任务吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            });
            await store.dispatch('task/userCancelTask', { taskID });
            ElMessage.success('任务已释放！');
            getTaskList();
        };
        const taskCheck = async(taskID:any) => {
            checkTaskID.value = taskID;
            modelVisible.value = true;
        };
        const closeTaskDialog = () => {
            modelVisible.value = false;
            getTaskList();
        };
        // 过滤附件类型
        const filterFileAction = (fileList, action) => {
            return fileList.filter((item) => item.action === action);
        };
        onMounted(() => {
            getTaskList();
        })
        return {
            release,
            taskStatus,
            modelVisible,
            checkTaskID,
            fileActions,
            checkResult,
            cancelTask,
            taskCheck,
            closeTaskDialog,
            filterFileAction
        }
    }
})
</script>
<style lang="scss" scoped>
.my-release {
    .release-btns {
        @extend %container;
    }
    .release-list {
        @extend %container;
        margin-top: 10px;
    }
    .table-expand {
        .el-form-item {
            margin-bottom: 0;
            .el-rate {
                margin: 10px 0;
            }
        }
    }
    .file-type-item {
        background: #f0f2f5;
        padding: 5px 10px;
        border-radius: 5px;
        margin-bottom: 10px;
        span {
            display: block;
            line-height: 30px;
        }
        li {
            line-height: 30px;
        }
    }
}
</style>